/*@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');*/
*
{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #091921;
}
.calculater
{
    position: relative;
    display: grid;
    place-items: center;
}
.calculater .value
{
    grid-column: span 4;
    height:60px;
    width: 280px;
    text-align: right;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 18px;
    background: #ffffff;
}
.calculater span
{
    display:grid;
    width: 70px;
    height: 50px;
    color: #ffffff;
    background: #868583;
    place-items: center;
    border:1px solid rgba(0,0,0,.1);
}
.calculater span:active
{
    background: #c5c5ac;
    color:#111;
}
.calculater span.clear
{
    grid-column: span 1;
    width:70px;
    background: #6d6c6a;
}
.calculater span.zero
{
    grid-column: span 2;
    height:50px;
    width:140px;
}
.calculater span.plus
{
    grid-row: span 1;
    height:50px;
    background: #f9a048;
}
.calculater span.equal
{
    background: #f9a048;
    grid-row: span 1;
    height:50px;
}
.calculater span.operator
{
    background: #f9a048;
}
.calculater span.history
{
    color: black;
    font-weight: bold;
    background: #f9a048;
    grid-row: span 1;
    grid-column: span 4;
    width:280px;
    height:50px;
}
.calculater span.she
{
    background: #6d6c6a;
}